<template>
    <view class="xjcategorylist">
        <view class="noData" v-if="livelist.length == 0 && columnlist.length == 0">
			<view slot="title">{{ category.name ? category.name : '待定名' }}</view>
			<view slot="right-icon">查看更多<i class="iconfont icon-arrow-right"></i></view>           
        </view>		
        <view class="live_wrapper" v-if="livelist.length > 0">
            <!-- <view class="list_navbar">
				<view slot="title">{{ category.name }}直播</view>
				<view slot="right-icon">查看更多<i class="iconfont icon-arrow-right"></i></view>                
            </view> -->			
			<view class="list_navbar">
				<view class="title">{{ category.name }}直播</view>
				<view class="more" @click="clickMoreLiveList">查看更多<i class="iconfont icon-arrow-right"></i></view>         
			</view>
			<view class="course_list">
				<view class="course_item" v-for="item in livelist" :key="item.id" @click="clickLive(item)">
					<view class="picture">
						<img :src="item.cover" @error="tabErrorPicture('livelist',item.id)" alt="" />						
					</view>
					<view class="message_intro">
						<view class="title">{{item.title}}</view>
						<view class="message_footer">
							<view class="price_wrap">
								<text class="price">{{ item.price == 0 ? '免费' : '￥' + item.price }}</text>
								<text class="oldPrice">{{ item.marking_price == 0 ? '' : '￥' + item.marking_price }}</text>
							</view>
							<text class="recording">{{ item.view || 0 }}次观看</text>							
						</view>
					</view>
				</view>
			</view>	
        </view>
        <view class="column_wrapper" v-if="columnlist.length > 0">
            <!-- <u-cell>
				<view slot="title">{{ category.name }}专栏</view>
				<view slot="right-icon" @click="clickMoreColumnList">查看更多<i class="iconfont icon-arrow-right"></i></view>
            </u-cell> -->
			<view class="list_navbar">
				<view class="title">{{ category.name }}专栏</view>
				<view class="more" @click="clickMoreColumnList">查看更多<i class="iconfont icon-arrow-right"></i></view>         
			</view>
			<view class="course_list">
				<view class="course_item" v-for="item in columnlist" :key="item.id" @click="clickColumn(item.id,item.type)">
					<view class="picture">
						<img :src="item.cover" @error="tabErrorPicture('columnlist',item.id)" alt="" />
					</view>
					<view class="message_intro">
						<view class="title">{{item.title}}</view>
						<view class="message_footer">
							<view class="price_wrap">
								<text class="price">{{ item.price == 0 ? '免费' : '￥' + item.price }}</text>
								<text class="oldPrice">{{ item.marking_price == 0 ? '' : '￥' + item.marking_price }}</text>
							</view>
							<text class="recording">{{ item.view || 0 }}次观看</text>							
						</view>
					</view>
				</view>
			</view>			
        </view>
		<view class="course_wrapper" v-if="courselist.length > 0">
			<!-- <u-cell>
				<view slot="title">{{ category.name }}课程</view>
				<view slot="right-icon" @click="clickMoreKnowledgeList">查看更多<i class="iconfont icon-arrow-right"></i></view>
			</u-cell> -->
			<view class="list_navbar">
				<view class="title">{{ category.name }}课程</view>
				<view class="more" @click="clickMoreKnowledgeList">查看更多<i class="iconfont icon-arrow-right"></i></view>         
			</view>
			<view class="course_list">
				<view class="course_item" v-for="item in courselist" :key="item.id" @click="clickKnowledge(item.id,item.type)">
					<view class="picture">
						<img :src="item.cover" @error="tabErrorPicture('courselist',item.id)" alt="" />
					</view>
					<view class="message_intro">
						<view class="title">{{item.title}}</view>
						<view class="message_footer">
							<view class="price_wrap">
								<text class="price">{{ item.price == 0 ? '免费' : '￥' + item.price }}</text>
								<text class="oldPrice">{{ item.marking_price == 0 ? '' : '￥' + item.marking_price }}</text>
							</view>
							<text class="recording">{{ item.view || 0 }}次观看</text>							
						</view>
					</view>
				</view>
			</view>	
		</view>
    </view>
</template>

<script>
import { api_getColumnList,api_getKnowledgeList,api_getLiveList } from '../../api/api'
import xjsearch from '@/components/shop/xjsearch.vue';
export default {
    props: ['category', 'prevent'],
    components: {
        xjsearch,
    },
    data() {
        return {
            id: '', 
            page: 1,	
			keyword: '',
            columnlist: [], 
            courselist:[],
            livelist: [],
			errorProduct: require('@/static/img/default_image.jpg'), 
        }
    },
	created() {
		uni.$on('sendSearchKeyword',(data) => {
			this.keyword = data;
			this.getcourseList(this.category.id);
			this.getLiveList(this.category.id);	
			this.getColumnList(this.category.id);	
		})
	    this.getcourseList(this.category.id);	
	    this.getLiveList(this.category.id);	
	    this.getColumnList(this.category.id);	
	},
	watch: {
	    'category.id': function (newVal, oldVal) {
	        this.id = newVal;
	        this.getLiveList(this.id);
	        this.getColumnList(this.id);
	    }
	},
    methods: {
        async getColumnList(id) {	//获得短视频专栏	 
			let query = {
				id,
				page: this.page,
				limit: 4,
				keyword: this.keyword
			}
			api_getColumnList(query).then(res => {				
				if (res.code == 1) {
					this.columnlist = res.data.columndata;
				} else {
					uni.showToast({ title: res.msg,icon: 'error' });
				}
			}).catch(err => console.log(err));
        },
        async getcourseList(id){	//	获取短视频课程 
            let query = {
                id,
                status: 1,
				keyword: this.keyword
            }
			api_getKnowledgeList(query).then(res => {				
				if (res.code == 1) {
					this.courselist = res.data.list;
				} else {
					uni.showToast({ title: res.msg,icon: 'error' });
				}
			}).catch(err => console.log(err));
        },
        async getLiveList(id) {		// 获得直播列表            
            let query = {
                id,
                status: 1,
				keyword: this.keyword,
                page: this.page,
                limit: 4
            }	
			api_getLiveList(query).then(res => {
				if (res.code == 1) {	
					this.livelist = res.data.livecoursedata;
				} else {
					uni.showToast({ title: res.msg,icon: 'error' });
				}
			}).catch(err => console.log(err));
        },	
		tabErrorPicture(name,id){	// 列表图片加载失败
			let i = this[name].findIndex(v => v.id == id);
			this[name][i].cover = this.errorProduct;		
		},
		clickKnowledge(id,type) {	// 短视频课程item项
            if (this.prevent) return;	
			type == 'image_text' && uni.navigateTo({ url: `/pages/image_textcontent/index?id=${id}` });
			type == 'audio' && uni.navigateTo({ url: `/pages/audiocontent/index?id=${id}` });
			type == 'video' && uni.navigateTo({ url: `/pages/videocontent/index?id=${id}` });
        },		
		clickLive(v) {	// 短视频直播item项
			if (this.prevent) return;	
			uni.navigateTo({ url: `/pages/livecontent/index?id=${v.id}`	});
		},		
        clickColumn(id,type) {	// 短视频专栏item项
            if (this.prevent) return;		
			type == 'column' && uni.navigateTo({ url: `/pages/product/index?id=${id}` });
			type == 'exam' && uni.navigateTo({ url: `/pages/examcontent/index?id=${id}`	});
        },
        clickMoreLiveList(id) {
            if (this.prevent) return;
			uni.navigateTo({ url: `/pages/morelivelist/index?id=${this.category.id}` });
            
        },
        clickMoreColumnList(id) {
            if (this.prevent) return;
			uni.navigateTo({ url: `/pages/morecolumnlist/index?id=${this.category.id}` });
        },
		clickMoreKnowledgeList(id) {
		    if (this.prevent) return;
			uni.navigateTo({ url: `/pages/moreknowledgelist/index?id=${this.category.id}` });
		}
    }
};
</script>

<style lang="scss" scoped>
.xjcategorylist{
	.noData{
		height: 36px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title{
			font-size: 16px;
		}
		.right-icon{
			display: flex;
			font-size: 14px;
			.iconfont{
				font-size: 15px;
			}
		}
	}
	.live_wrapper{
		.list_navbar{
			height: 40px;
			padding: 0 10px;
			border: 1px solid #eee;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 15px;
				font-weight: bold;
			}
			.more{
				display: flex;
				font-size: 13px;
			}
		}
		.course_list{
			.course_item{
				font-size: 12px;
				color: #323233;
				background-color: #fafafa;
				margin-top: 10px;
				padding: 5px 10px;
				box-sizing: border-box;
				display: flex;
				.picture{
					width: 100px;
					img{
						display: block;
						width: 100px;
						height: 100px;
					}
				}
				.message_intro{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 0 0 0 10px;
					width: calc(100vw - 120px);
					box-sizing: border-box;
					.title{
						font-size: 15px;
					}
					.price_wrap{
						.price{
							font-size: 12px;
							color: red;
						}
						.oldPrice{
							font-size: 12px;
							text-decoration: line-through;
							margin: 0 0 0 10px;
							color: #969799;
						}
					}
					.message_footer{
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}
	.column_wrapper{
		.list_navbar{
			height: 40px;
			padding: 0 10px;
			border: 1px solid #eee;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 15px;
				font-weight: bold;
			}
			.more{
				font-size: 13px;
			}
		}
		.course_list{
			.course_item{
				font-size: 12px;
				color: #323233;
				background-color: #fafafa;
				margin-top: 10px;
				padding: 5px 10px;
				box-sizing: border-box;
				display: flex;
				.picture{
					width: 100px;
					img{
						display: block;
						width: 100px;
						height: 100px;
					}
				}
				.message_intro{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 0 0 0 10px;
					width: calc(100vw - 120px);
					box-sizing: border-box;
					.title{
						font-size: 15px;
					}
					.price_wrap{
						.price{
							font-size: 12px;
							color: red;
						}
						.oldPrice{
							font-size: 12px;
							text-decoration: line-through;
							margin: 0 0 0 10px;
							color: #969799;
						}
					}
					.message_footer{
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}
	.course_wrapper{
		.list_navbar{
			height: 40px;
			padding: 0 10px;
			border: 1px solid #eee;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 15px;
				font-weight: bold;
			}
			.more{
				font-size: 13px;
			}
		}
		.course_list{
			.course_item{
				font-size: 12px;
				color: #323233;
				background-color: #fafafa;
				margin-top: 10px;
				padding: 5px 10px;
				box-sizing: border-box;
				display: flex;
				.picture{
					width: 100px;
					img{
						display: block;
						width: 100px;
						height: 100px;
					}
				}
				.message_intro{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 0 0 0 10px;
					width: calc(100vw - 120px);
					box-sizing: border-box;
					.title{
						font-size: 15px;
					}
					.price_wrap{
						.price{
							font-size: 12px;
							color: red;
						}
						.oldPrice{
							font-size: 12px;
							text-decoration: line-through;
							margin: 0 0 0 10px;
							color: #969799;
						}
					}
					.message_footer{
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}
}
</style>
